<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/public/css/element-ui/index.css">
    <link rel="stylesheet" href="/public/css/icon/iconfont.css">
    <link rel="stylesheet" href="/public/css/icon/iconfont.css">
    <!-- import Vue before Element -->
    <script src="/public/js/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="/public/js/http-vue-loader"></script>
    <title>销售管理</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .el-dialog__body{
            padding-top:10px;
            padding-bottom:10px;
        }
        .rili-time {
            font-size: 24px;
            color: red;
            display: block;
            width: 100%;
            text-align: center;
            margin-top: 5px;
        }

        .el-carousel__container {
            height: 340px;
        }

        .el-aside .el-carousel {
            margin: 5px;
            border: 2px solid #ccc;
            border-radius: 9px;
        }

        .rili {
            margin: 5px;
            border: 2px solid #ccc;
            border-radius: 9px;
            margin-top: 0px;
            border-top: none;
            padding: 20px 0 0 0;
        }

        .rili-block {
            border: 1px solid #ccc;
            /*padding: 20px;*/
        }

        .rili-date {
            display: block;
            width: 100%;
            font-size: 18px;
            border-bottom: 1px solid #ccc;
            text-align: center;
            padding: 10px 0;
        }

        .rili-day {
            font-size: 35px;
            color: blue;
            display: block;
            width: 100%;
            text-align: center;
            margin-top: 5px;
        }

        .rili-xingqi,
        .rili-nongli {
            display: block;
            width: 100%;
            text-align: center;
        }

        .rili-xingqi {
            font-size: 12px;
            line-height: 20px;
        }

        .rili-nongli {
            font-size: 12px;
            color: red;
            line-height: 20px;
        }

        .rili-buttom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            align-content: center;
        }

        .rili-buttom .item {
            flex-grow: 0;
            margin-top: 10px;
        }

        .rili .el-badge__content.is-fixed {
            right: 0px;
        }

        .content-main {
            background-color: #f5f5f5;
            border: 1px solid #99bce8;
            margin-top: 0px;
        }

        .msg-content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }

        .msg-content .block {
            width: 30%;
            height: 125px;
            border-radius: 8px;
            margin: 10px;
            background-color: #fff;

        }

        .msg-content .panel-inner {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
        }

        .msg-content .panel-inner .avatar .el-avatar {
            background-color: #fff;
            color: #47a87f;
            border: 1px solid #47a87f;
            font-size: 36px;
        }

        .msg-content .panel-inner .avatar {
            margin-top: 20px;
            margin-left: 40px;
        }

        .msg-content .panel-inner .title,
        .msg-content .panel-inner .msg-counts {
            display: flex;
            flex-direction: column;
            margin: 20px;
        }

        .msg-content .panel-inner .title .msg-title {
            font-size: 20px;
        }

        .msg-content .panel-inner .title .msg-total {
            font-size: 12px;
            margin-top: 20px;
        }

        .msg-content .panel-inner .msg-counts .item {
            font-size: 12px;
            margin-bottom: 15px;
        }

        .msg-content .panel-inner .msg-counts .item span:last-child {
            font-size: 16px;
            color: red;
        }

        .demo-basic--circle,
        .button-list {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .button-list {
            margin: 5px;
            margin-bottom: 0px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
            /*border: 2px solid #ccc;*/
            /*border-radius: 9px;*/
        }

        .button-list .block {
            flex: 1;
            display: flex;
            flex-direction: column;
            /*flex-grow: 1;*/
            margin-top: 10px;
        }

        .button-list .block .el-button {
            padding: 12px 5px !important;
        }


        .demo-basic--circle .block {
            flex: 1;
            display: flex;
            flex-direction: column;
            /*flex-grow: 1;*/
            margin-top: 15px;
            cursor: pointer;
            color: #8492a6;
        }

        .demo-basic--circle .block:hover {
            background-color: #e95352;
            color: #fff;
            border-radius: 8px;
        }

        .demo-basic--circle .block .title {
            margin-top: 10px;
            font-size: 14px;

            text-align: center;
        }

        .demo-basic--circle .el-avatar {
            display: inline-block;
            box-sizing: border-box;
            text-align: center;
            overflow: hidden;
            color: #fff;
            background: #f5f5f5;
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #f5f5f5;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #f5f5f5;
        }

        .el-header {
            height: 40px !important;
            background-color: #b81f1f;
            color: #fff;
        }

        .el-footer {
            background-color: #000;
            color: #A4A4A4;
            /*text-align: center;*/
            /*line-height: 60px;*/
        }

        .el-aside {
            background-color: #fff;
            color: #333;
            /*text-align: center;*/
            /*line-height: 200px;*/
        }

        .el-main {
            /*background-color: #E9EEF3;*/
            /*color: #333;*/
            padding: 0px;
            padding-top: 5px;
            /*text-align: center;*/
            /*line-height: 160px;*/
        }

        body>.el-container {
            margin-bottom: 40px;
        }




        .el-row {
            margin-bottom: 20px;
        }

        .el-row:last-child {
            margin-bottom: 0;
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #d8d8d8;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            /*margin-top: 5px;*/
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .block .el-avatar>img {
            height: auto !important;
            margin: 22px auto;
            width: 36px;
        }

        .el-tabs--border-card>.el-tabs__content {
            padding: 0;
        }

        .input-with-select.input-search .el-input__prefix {
            font-size: 35px;
            left: 190px;
            cursor: pointer;
        }

        .input-with-select.input-search .el-input__prefix .iconfont {
            font-size: 35px;
            font-weight: 200;
        }

        .input-with-select.input-search .el-input__prefix .iconfont:hover {
            color: cornflowerblue;
        }

        .input-with-select.input-search .el-input__inner {
            height: 47px;
            /* padding-left:15px;*/
        }

        .input-with-select.input-search .el-input-group__prepend {
            width: 100px;
            padding-left: 5px;
        }

        iconfont iconpaizhao1 .col-md-12 {
            display: block;
            overflow: hidden;
            background-color: #f5f5f5;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="grid-content">
                            <a href="/" target="_self">
                                <el-image style="width: 200px; height: 38px" src="./statics/images/logo.png"
                                    fit="contain"></el-image>
                            </a>
                        </div>
                    </el-col>
                    <el-col :span="14">
                        <div class="grid-content " style="line-height: 40px;">

                            <el-row>
                                <el-col :span="2">
                                    <div class="grid-content" style="text-align: center">
                                        <el-image style="width: 40px; height: 40px" src="./statics/images/head.png">
                                        </el-image>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content">
                                        <span>上午好！吴先生</span>
                                        <i class="el-icon-check"></i>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="grid-content" style="height: 40px;line-height: 40px;text-align: right">
                            <el-button plain @click="open1">
                                消息测试
                            </el-button>

                            <quanxian-text></quanxian-text>
                            <i class="el-icon-refresh-right" style="font-size: 20px"></i>
                            <i class="el-icon-full-screen" style="font-size: 20px;margin-left: 10px;"></i>
                            <i class="el-icon-close" style="font-size: 20px;margin-left: 10px;"></i>
                        </div>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="220px">
                    <menus></menus>
                    <div class="button-list">
                        <div class="block">
                            <el-button @click="open">网络查询</el-button>
                        </div>
                        <div class="block">
                            <el-button>企业微信</el-button>
                        </div>

                        <div class="block">
                            <el-button @click="open2" class="el-icon-search">搜索</el-button>
                        </div>
                    </div>
                    <div class="rili">
                        <img style="width: 100%" src="./statics/images/rili.png" alt="">
                        <div class="rili-buttom">
                            <el-button class="item" size="mini">审批</el-button>
                            <el-button class="item" size="mini">公告</el-button>
                            <el-button class="item" size="mini">
                                <el-badge :value="0" :max="99">
                                    邮件
                                </el-badge>
                            </el-button>

                        </div>
                        <div class="rili-buttom" style="padding-bottom: 20px">
                            <el-button class="item" size="mini">日程</el-button>
                            <el-button class="item" size="mini">秘书</el-button>
                            <el-button class="item" size="mini">电话</el-button>

                        </div>
                    </div>
                </el-aside>
                <el-container :style="{height: mainHeight}">
                    <el-main :style="{height: mainHeight}">
                        <div class="content-main">
                            <el-tabs type="border-card">


                                <el-tab-pane label="客户池">
                                    <customer-pool></customer-pool>
                                </el-tab-pane>
                                <el-tab-pane label="客户管理">
                                    <customer-manage></customer-manage>
                                </el-tab-pane>
                                <el-tab-pane label="跟进管理">
                                    <customer-schedule></customer-schedule>
                                </el-tab-pane>
                                <el-tab-pane label="预算报价">
                                    <el-tabs type="border-card">
                                        <el-tab-pane label="正常报价预算">
                                            <baojia-default-ys></baojia-default-ys>
                                        </el-tab-pane>
                                        <el-tab-pane label="维修报价预算">
                                            <baojia-repair-ys></baojia-repair-ys>
                                        </el-tab-pane>
                                </el-tab-pane>

                                <el-tab-pane label="订单管理">
                                    <el-tabs type="border-card">
                                        <el-tab-pane label="正常订单">
                                            <order-list-default></order-list-default>
                                        </el-tab-pane>
                                        <el-tab-pane label="维修订单">
                                            <order-list-repair></order-list-repair>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-tab-pane>
                                <el-tab-pane label="报价">
                                    <baojia-order-list></baojia-order-list>
                                </el-tab-pane>
                                <el-tab-pane label="退换货管理">
                                    <returns-list></returns-list>
                                </el-tab-pane>
                                <el-tab-pane label="出货管理">
                                    <el-tabs type="border-card">
                                        <el-tab-pane label="待办订单">
                                            <chuhuojiesuan-list></chuhuojiesuan-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="待办现货">
                                            <chuhuojiesuan-list1></chuhuojiesuan-list1>
                                        </el-tab-pane>

                                        <el-tab-pane label="待办调拨">
                                            <chuhuojiesuan-list2></chuhuojiesuan-list2>
                                        </el-tab-pane>

                                        <el-tab-pane label="出货">
                                            <chuhuojiesuan-list3></chuhuojiesuan-list3>
                                        </el-tab-pane>

                                        <el-tab-pane label="出货对账">
                                            <chuhuojiesuan-list4></chuhuojiesuan-list4>
                                        </el-tab-pane>


                                    </el-tabs>
                                </el-tab-pane>

                                <!-- <el-tab-pane label="客仓管理">
                                    <el-tabs type="border-card">
                                        <el-tab-pane label="客来石">
                                            <store-customer-shi></store-customer-shi>
                                        </el-tab-pane>
                                        <el-tab-pane label="客来金">
                                            <store-customer-jin></store-customer-jin>
                                        </el-tab-pane>
                                        <el-tab-pane label="客来配件">
                                            <store-customer-peijian></store-customer-peijian>
                                        </el-tab-pane>
                                        <el-tab-pane label="其它">
                                            <store-customer-other></store-customer-other>
                                        </el-tab-pane>
                                        <el-tab-pane label="收管理">
                                            <store-customer-in></store-customer-in>
                                        </el-tab-pane>
                                        <el-tab-pane label="发管理">
                                            <store-customer-out></store-customer-out>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-tab-pane> -->
                                <el-tab-pane label="客仓管理">
                                    <el-tabs type="border-card">
                                        <el-tab-pane label="库存">
                                            <store-customer-list></store-customer-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="预来料">
                                            <store-customer-yulailiao></store-customer-yulailiao>
                                        </el-tab-pane>
                                        <!-- <el-tab-pane label="客来石">
                                            <store-customer-shi></store-customer-shi>
                                        </el-tab-pane>
                                        <el-tab-pane label="客来金">
                                            <store-customer-jin></store-customer-jin>
                                        </el-tab-pane>
                                        <el-tab-pane label="客来配件">
                                            <store-customer-peijian></store-customer-peijian>
                                        </el-tab-pane>
                                        <el-tab-pane label="维修货">
                                            <store-customer-repair></store-customer-repair>
                                        </el-tab-pane> -->
                                        <el-tab-pane label="入库 3">
                                            <store-customer-in></store-customer-in>
                                        </el-tab-pane>
                                        <el-tab-pane label="出库 4">
                                            <store-customer-out></store-customer-out>
                                        </el-tab-pane>
                                        <!-- <el-tab-pane label="待处理">
                                            <store-customer-dcl></store-customer-dcl>
                                        </el-tab-pane> -->
                                    </el-tabs>
                                </el-tab-pane>

                                <el-tab-pane label="客服管理">
                                    <el-tabs type="border-card">
                                        <el-tab-pane label="全部">
                                            <kefupingjia-list></kefupingjia-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="未回访">
                                            <kefupingjia-list></kefupingjia-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="已回访">
                                            <kefupingjia-list></kefupingjia-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="未评价">
                                            <kefupingjia-list></kefupingjia-list>
                                        </el-tab-pane>
                                        <el-tab-pane label="已评价">
                                            <kefupingjia-list></kefupingjia-list>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-tab-pane>
                                <el-tab-pane label="产品资料库">
                                    <el-tabs type="border-card">
                                        <el-tab-pane label="全部">
                                            <product-library></product-library>
                                        </el-tab-pane>
                                        <el-tab-pane label="戒指">
                                            <product-library></product-library>
                                        </el-tab-pane>
                                        <el-tab-pane label="吊坠">
                                            <product-library></product-library>
                                        </el-tab-pane>
                                        <el-tab-pane label="耳环">
                                            <product-library></product-library>
                                        </el-tab-pane>
                                        <el-tab-pane label="项链">
                                            <product-library></product-library>
                                        </el-tab-pane>
                                    </el-tabs>

                                </el-tab-pane>

                            </el-tabs>
                        </div>
                    </el-main>
                </el-container>
            </el-container>
            <el-footer style="height: 18px;">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content" style="text-align: center;font-size: 12px;min-height: 18px;">
                            Copyright ©2013 柏毓MOM系统 All rights reserved
                        </div>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</body>


<!-- import JavaScript -->
<script src="/public/js/index.js"></script>


<script>
    Vue.use(httpVueLoader)
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                value: new Date(),
                mainHeight: '790px',
                //        input1: '',
                //        input2: '',
                //        input3: '',
                select: ''
            }
        },
        methods: {
            open() {
                this.$prompt('请输入搜索内容', '百度搜索', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    // inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '搜索内容是: ' + value
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    })
                })
            },
            open1() {
                this.$notify({
                    title: '审批通知',
                    message: '点击进入审批页面',
                    type: 'success'
                });
            },
            open2() {
                this.$prompt('请输入搜索内容', '全局搜索2', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                    // inputErrorMessage: '邮箱格式不正确'
                }).then(({ value }) => {
                    this.$message({
                        type: 'success',
                        message: '搜索内容是: ' + value
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    })
                })
            },
            goto(link) {
                console.log(link)
                window.location.href = './' + link + '.html'
            }
        },
        created() {
            var height = document.documentElement.clientHeight
            var newHeight = height - 40 - 20
            this.mainHeight = newHeight + 'px'
            return 1
        },
        components: {
            // 将组建加入组建库
             'menus': 'url:./component/menus.vue',//菜单
             'quanxian-text': 'url:./component/quanxian-text.vue',//权限
            'customer-pool': 'url:./component/customer-pool.vue',//客户池
            'customer-manage': 'url:./component/customer-manage.vue',//客户
            'customer-schedule': 'url:./component/customer-schedule.vue',//跟进管理
            'baojia-default-ys': 'url:./component/baojia-default-ys.vue',//正常报价预算
            'baojia-repair-ys': 'url:./component/baojia-repair-ys.vue',//维修报价预算
            'baojia-order-list': 'url:./component/baojia-order-list.vue',//报价-订单
            'order-list-default': 'url:./component/order-list-default.vue',//正常订单
            'order-list-repair': 'url:./component/order-list-repair.vue',//维修订单
            'returns-list': 'url:./component/returns-list.vue',//退换货管理
            'chuhuojiesuan-list': 'url:./component/chuhuojiesuan-list.vue',//出货结算管理
            'chuhuojiesuan-list1': 'url:./component/chuhuojiesuan-list1.vue',//出货结算管理
            'chuhuojiesuan-list2': 'url:./component/chuhuojiesuan-list2.vue',//出货结算管理
            'chuhuojiesuan-list3': 'url:./component/chuhuojiesuan-list3.vue',//出货结算管理
            'chuhuojiesuan-list4': 'url:./component/chuhuojiesuan-list4.vue',//出货结算管理
            // 'store-customer-shi': 'url:./component/store-customer-shi.vue',//客来石
            // 'store-customer-jin': 'url:./component/store-customer-jin.vue',//客来金
            // 'store-customer-peijian': 'url:./component/store-customer-peijian.vue',//客来配件
            // 'store-customer-repair': 'url:./component/store-customer-repair.vue',//维修货
            // 'store-customer-other': 'url:./component/store-customer-other.vue',//客来其它
            'store-customer-list': 'url:./component/store-customer-list.vue',//库存
            'store-customer-yulailiao': 'url:./component/store-customer-yulailiao.vue',//预来料
            'store-customer-in': 'url:./component/store-customer-in.vue',//客来仓入库
            'store-customer-out': 'url:./component/store-customer-out.vue',//客来仓出库
            'kefupingjia-list': 'url:./component/kefupingjia-list.vue',//客服管理
            'product-library': 'url:./component/product-library.vue',//产品库

        },
    },
    )
</script>

</html>
